<template>
    <tiny-form  label-position="right" label-width="120px" :model="props.data"  ref="ruleFormRef" :rules="rules" :validate-on-rule-change="props.isValidate">
        <tiny-divider content-position="center">基础配置</tiny-divider>
        <tiny-row>
            <tiny-col :span="6">
                <tiny-form-item label="执行器" prop="jobGroup" >
                    <vo-select default select dictCode="jobExcetor" v-model:value="data.jobGroup" />
                </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
                <tiny-form-item label="任务名称" prop="jobDesc" >
                    <tiny-input v-model="data.jobDesc" placeholder="任务名称"></tiny-input>
                </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-row>
            <tiny-col :span="6">
            <tiny-form-item label="负责人" prop="author" >
                <tiny-input v-model="data.author" placeholder="负责人"></tiny-input>
            </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
            <tiny-form-item label="报警邮件">
                <tiny-input v-model="data.alarmEmail" placeholder="报警邮件"></tiny-input>
            </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-divider content-position="center">调度配置</tiny-divider>

        <tiny-row>
            <tiny-col :span="6">
            <tiny-form-item label="调度类型" prop="scheduleType" >
                <vo-select default select dictCode="jobExcetor" v-model:value="data.scheduleType" />
            </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
            <tiny-form-item label="CRON表达式" prop="scheduleConf" >
                <tiny-input v-model:value="data.scheduleConf" />
            </tiny-form-item>
            <tiny-form-item label="固定速度" v-if="false" prop="scheduleConf" >
                <tiny-input v-model:value="data.scheduleConf" />
            </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-divider content-position="center">任务配置</tiny-divider>
        <tiny-row>
            <tiny-col :span="6">
            <tiny-form-item label="运行模式" prop="glueType" >
                <vo-select default select dictCode="jobExcetor" v-model:value="data.glueType" />
            </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
            <tiny-form-item label="执行方法" prop="executorHandler" required>
                <tiny-input v-model:value="data.executorHandler"  />
            </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-row>
        <tiny-col :span="12">
            <tiny-form-item label="运行参数">
                <tiny-input v-model="data.executorParam" type="textarea"> </tiny-input>
            </tiny-form-item>
        </tiny-col>
        </tiny-row>
        <tiny-divider content-position="center">高级配置</tiny-divider>
        <tiny-row>
            <tiny-col :span="6">
            <tiny-form-item label="路由策略">
                <vo-select default select dictCode="jobExcetor" v-model:value="data.executorBlockStrategy" />
            </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
            <tiny-form-item label="子任务ID">
                <tiny-input v-model:value="data.childJobid" />
            </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-row>
            <tiny-col :span="6">
            <tiny-form-item label="调度过期策略">
                <vo-select default select dictCode="jobExcetor" v-model:value="data.misfireStrategy" />
            </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
            <tiny-form-item label="阻塞处理策略">
                <vo-select default select dictCode="jobExcetor" v-model:value="data.executorBlockStrategy" />
            </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-row>
            <tiny-col :span="6">
            <tiny-form-item label="任务超时时间">
                <tiny-numeric v-model:value="data.executorTimeout" unit="秒" />
            </tiny-form-item>
            </tiny-col>
            <tiny-col :span="6">
            <tiny-form-item label="失败重试次数">
                <tiny-numeric v-model:value="data.executorFailRetryCount" unit="次" />
            </tiny-form-item>
            </tiny-col>
        </tiny-row>
        <tiny-row>
            <tiny-row style="padding-top: 20px;">
                <tiny-col :span="12" offset="10" >
                    <tiny-button-group>
                        <tiny-button type="primary" @click="saveBtn">保存</tiny-button>
                        <tiny-button @click="cancelBtn">取消</tiny-button>
                    </tiny-button-group>
                </tiny-col>
            </tiny-row>
        </tiny-row>
    </tiny-form>
</template>
<script  setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
const props = defineProps({
    data: {},
})

const ruleFormRef = ref();
const rules = reactive({
    jobGroup:  { required: true, message: '请选择执行器', trigger: 'blur' },
    jobDesc:   { required: true,message: '请填写任务名称', trigger: 'blur'},
    author:   { required: true,message: '请填写负责人', trigger: 'blur'},
    scheduleType:   { required: true,message: '请选择调度类型', trigger: 'blur'},
    glueType:   { required: true,message: '请选择运行模式', trigger: 'blur'},
    executorHandler:   { required: true,message: '请填写执行方法', trigger: 'blur'},

})
const saveBtn = ()=>{
    console.log(props.data)
}
</script>
<style lang="scss" scoped>
.tiny-form-item {
    margin-bottom: var(--ti-form-item-margin-bottom-small);
}
.tiny-divider.tiny-divider--horizontal {
    display: block;
    height: 1px;
    margin: 20px 0;
    border-top: var(--ti-divider-dividing-line);
    opacity: var(--ti-divider-horizontal-opacity);
}
</style>